<template>
  <el-container class="disciple-container">
    <!-- 弟子列表 -->
    <el-aside width="260px" class="sidebar">
      <div class="sidebar-header fixed-header">
        <h2>弟子列表</h2>
        <span class="total-count">共 {{ disciples.length }} 人</span>
      </div>

      <div class="disciple-list scrollable" v-if="(!disciples) || (disciples.length > 0)">
        <div v-for="(disciple, index) in disciples" :key="disciple.id" class="disciple-card"
          :class="{ active: currentDisciple?.code === disciple.code }" @click="viewDisciples(disciple as Disciple)"
          @contextmenu.prevent="discipleMenu(disciple as Disciple)">
          <div class="disciple-avatar">
            {{ disciple.name.charAt(0) }}
          </div>
          <div class="disciple-info">
            <div class="disciple-name-code">
              <span class="disciple-name">{{ disciple.name }}</span>
              <span class="disciple-code">{{ disciple.code }}</span>
            </div>
            <div class="disciple-score">
              <span class="score-value">{{ disciple.getCurrentPeriodTotalScore() }}</span>
              <span class="score-label">积分</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <p style="padding: 20px; color: #909399;">暂无弟子，点击下方按钮添加新弟子。</p>
      </div>

      <div class="fixed-add-card">
        <div class="disciple-card disciple-add" @click="addDiscipleBtn()">
          <span>+ 添加新弟子</span>
        </div>
      </div>
    </el-aside>

    <el-main class="main-content" v-if="disciples.length > 0 ">
      <!-- 弟子的信息 -->
      <div class="content-header fixed-header">
        <div class="disciple-profile">
          <div class="profile-avatar">
            {{ currentDisciple?.name?.charAt(0) }}
          </div>
          <div class="profile-info">
            <h2 class="current-name">
              {{ currentDisciple?.name }}
              <span class="current-code">({{ currentDisciple?.code }})</span>
            </h2>
            <div class="score-display">
              <span class="score-badge">{{ currentDisciple?.getCurrentPeriodCappedTotalScore() }}</span>
              <span class="score-text">积分</span>
              <span class="star-badge" style="margin-left: 15px;">{{ currentDisciple?.star }}</span>
              <span class="star-text">星级</span>
            </div>
          </div>
          <div class="disciple-menu">
            <el-button type="primary" class="add-record-btn" :icon="Plus" @click="viewScoreRulesSelect()">
              添加得分记录
            </el-button>
            <el-button type="warning" :icon="Edit" circle @click="editDiscipleBtn()" />
            <!-- <el-button type="danger" :icon="Delete" circle @click="deleteDiscipleBtn()" /> -->
          </div>
        </div>

        <div class="action-bar">
          <div class="date-filter">
            <el-date-picker v-model="tableFilter.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" class="date-picker" />
          </div>
          <div class="name-filter">
            <el-input v-model="tableFilter.name" placeholder="得分原因" clearable />
          </div>
          <div class="category-filter">
            <el-select v-model="tableFilter.ruleCategory" placeholder="规则类别" style="width: 240px" clearable>
              <el-option v-for="(rule, index) in ScoringRule.categories" :key="index" :label="rule" :value="rule" />
            </el-select>
          </div>
          <div class="master-rule-filter">
            <el-select v-model="tableFilter.isMasterRule" placeholder="山长/师门规则" style="width: 240px" clearable>
              <el-option label="山长规则" :value="0" />
              <el-option label="师门规则" :value="1" />
            </el-select>
          </div>
          <div class="filter-btn">
            <el-button type="primary" :icon="DataAnalysis" @click="viewDisciples(currentDisciple as Disciple)">筛选</el-button>
            <el-button :icon="Refresh" @click="resetFilter">重置</el-button>
          </div>
        </div>
      </div>

      <!-- 弟子得分明细表 -->
      <div class="content-body scrollable">
        <div class="table-container">
          <el-table :data="viewDetails" style="width: 100%" class="score-table" height="650">
            <el-table-column prop="date" label="得分日期" align="center" />
            <el-table-column prop="leaderScore" label="山长分数" align="center">
              <template #default="scope">
                <span>
                  {{ scope.row.leaderScore }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="masterScore" label="师门分数" align="center">
              <template #default="scope">
                <span>
                  {{ scope.row.masterScore }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="reason" label="原因" />
            <el-table-column prop="rule.category" label="类型" align="center"/>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-popconfirm width="220" :icon="InfoFilled" icon-color="#626AEF" title="你确定要删除这个吗？">
                  <template #reference>
                    <el-button type="danger" size="small" :icon="Delete">
                      删除
                    </el-button>
                  </template>
                  <template #actions="{ confirm, cancel }">
                    <el-button size="small" @click="cancel">否</el-button>
                    <el-button type="danger" size="small" @click="deleteDetailBtn(scope.row.id)">
                      是
                    </el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 得分统计 -->
        <div class="stats-card" v-if="currentDisciple?.details && currentDisciple.details.length > 0">
          <div class="stats-header">
            <h3>得分统计</h3>
          </div>
          <div class="stats-content">
            <!-- 统计内容可以根据需要添加 -->
            <p class="scoring-item-detail">山长总分: {{ currentDisciple?.getLeaderBonusCappedTotal() }}</p>
            <p class="scoring-item-detail">师门总分: {{ currentDisciple?.getSectBonusCappedTotal() }}</p>
            <el-divider style="margin-top: 7px; margin-bottom: 7px;"/>
            <!-- <p v-for="score in currentDisciple.scores" class="scoring-item-detail">
              {{ score.rule.item }}: {{ currentDisciple?.getSectBonusCappedTotal() }}
            </p> -->
            <ScoringItem v-for="score in currentDisciple.scores" :key="score.id" :score="score"/>
          </div>
        </div>
      </div>
    </el-main>

    <el-main v-else>
      <p style="padding: 20px; color: #909399; text-align: center;">
        请选择左侧的弟子以查看详细信息，或添加新弟子。
      </p>
    </el-main>

    <!-- 添加弟子的模态框 -->
    <el-dialog class="add-disciple-modal" v-model="addDiscipleModalVisible" title="添加弟子" width="500">
      <el-form :model="newDisciple" label-width="80px" class="add-disciple-form">
        <el-form-item label="姓名">
          <el-input v-model="newDisciple.name" placeholder="请输入弟子姓名" />
        </el-form-item>
        <el-form-item label="代号">
          <el-input v-model="newDisciple.code" placeholder="请输入弟子代号" />
        </el-form-item>
        <el-form-item label="星级">
          <el-input-number v-model="newDisciple.star" :min="0" placeholder="请输入弟子星级" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDiscipleModalVisible = false">取消</el-button>
          <el-button type="primary" @click="addDiscipleCtl()">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑弟子的模态框 -->
    <el-dialog class="add-disciple-modal" v-model="editDiscipleModalVisible" title="编辑弟子" width="500">
      <el-form :model="newDisciple" label-width="80px" class="add-disciple-form">
        <el-form-item label="姓名">
          <el-input v-model="newDisciple.name" placeholder="请输入弟子姓名" />
        </el-form-item>
        <el-form-item label="代号">
          <el-input v-model="newDisciple.code" placeholder="请输入弟子代号" />
        </el-form-item>
        <el-form-item label="星级">
          <el-input-number v-model="newDisciple.star" :min="0" placeholder="请输入弟子星级" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDiscipleModalVisible = false">取消</el-button>
          <el-button type="primary" @click="editDiscipleCtl()">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 删除弟子确认的模态框 -->
    <el-dialog class="delete-disciple-modal" v-model="deleteDiscipleModalVisible" title="删除弟子" width="400">
      <span>确定要删除弟子 "{{ newDisciple.code }}" 吗？在删除之后，可以到回收站找回。</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteDiscipleModalVisible = false">取消</el-button>
          <el-button type="danger" @click="deleteDiscipleCtl()">删除</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 添加得分记录规则的模态框 -->
    <el-dialog class="add-score-modal" v-model="addRulesModalVisible" title="得分记录" width="500">
      <el-form :model="formModel" label-width="80px" class="add-score-form">
        <el-form-item label="得分项目">
          <el-select v-model="currentRules" multiple placeholder="请选择得分项目">
            <el-option v-for="rule in rulesList" :key="rule.id" :label="rule.item" :value="rule.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addRulesModalVisible = false">取消</el-button>
          <el-button type="primary" @click="addRulesCtl()">下一步</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 添加得分记录明细的模态框 -->
    <el-dialog class="add-score-detail-modal" v-model="addScoreModalVisible" title="添加得分记录"
      :before-close="returnScoringRulesDialog" width="1550">
      <el-form :model="formModel" label-width="80px" class="add-score-detail-form" v-if="addScoreModalVisible">
        <el-table :data="currentDetails" style="width: 100%" class="score-detail-table">
          <el-table-column prop="reason" label="得分项目" width="150" />
          <el-table-column prop="rule.description" label="描述" />
          <el-table-column prop="ruleDetails" label="具体规则">
            <template #default="scope">
              <span>
                <span v-if="[0, 2].includes(scope.row.rule?.rules.isMasterScore)"> <!-- 山长 -->
                  <span v-if="scope.row.rule?.rules.leader.minScore === scope.row.rule?.rules.leader.maxScore">
                    山长固定分数: {{ scope.row.rule?.rules.leader.minScore }}
                  </span>
                  <span v-else>
                    山长分数范围: {{ scope.row.rule?.rules.leader.minScore }} ~ {{ scope.row.rule?.rules.leader.maxScore }}
                  </span>
                  <span v-if="scope.row.rule?.rules.leader.topScore && scope.row.rule?.rules.leader.topScore !== -1">
                    ，封顶分数: {{ scope.row.rule?.rules.leader.topScore }}
                  </span>
                </span>
                <span v-if="scope.row.rule?.rules.isMasterScore === 2">;</span>
                <span v-if="[1, 2].includes(scope.row.rule?.rules.isMasterScore)"> <!-- 师门 -->
                  <span v-if="scope.row.rule?.rules.master.minScore === scope.row.rule?.rules.master.maxScore">
                    师门固定分数: {{ scope.row.rule?.rules.master.minScore }}
                  </span>
                  <span v-else>
                    师门分数范围: {{ scope.row.rule?.rules.master.minScore }} ~ {{ scope.row.rule?.rules.master.maxScore }}
                  </span>
                  <span v-if="scope.row.rule?.rules.master.topScore && scope.row.rule?.rules.master.topScore !== -1">
                    ，封顶分数: {{ scope.row.rule?.rules.master.topScore }}
                  </span>
                </span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="leaderScore" label="山长分数" align="center">
            <template #default="scope">
              <el-input v-model.number="scope.row.leaderScore" :max="scope.row.rule?.rules.leader.maxScore"
                :min="scope.row.rule?.rules.leader.minScore" :disabled="scope.row.rule?.rules.isMasterScore === 1"
                type="number" />
            </template>
          </el-table-column>
          <el-table-column prop="masterScore" label="师门分数" align="center">
            <template #default="scope">
              <el-input v-model.number="scope.row.masterScore" :max="scope.row.rule?.rules.master.maxScore"
                :min="scope.row.rule?.rules.master.minScore" :disabled="scope.row.rule?.rules.isMasterScore === 0"
                type="number" />
            </template>
          </el-table-column>
          <el-table-column prop="date" label="得分日期" align="center">
            <template #default="scope">
              <el-date-picker v-model="scope.row.date" type="date" placeholder="选择日期" />
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="returnScoringRulesDialog()">上一步</el-button>
          <el-button type="primary" @click="addDetailsCtl()">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { Edit, Delete, Plus, InfoFilled, Refresh, DataAnalysis } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { DiscipleService } from '@/service/DiscipleService';
import { RuleService } from '@/service/RuleService';
import { DateUtil } from '@/utils/DateUtil';
import { Disciple } from '@/domain/Disciple';
import { ScoringRule } from '@/domain/ScoringRule';
import { Detail } from '@/domain/Detail';
import ScoringItem from '@/components/ScoringItem.vue';

// 在需要的地方使用
// await nextTick()

// 响应式数据
const disciples = ref<Disciple[]>([]);
const rulesList = ref<ScoringRule[]>([]);
const currentRules = ref<number[]>([]);
const currentDetails = ref<Detail[]>([]);
const currentDisciple = ref<Disciple | null>(null);
const viewDetails = ref<Detail[]>([]);
const tableFilter = ref({
  dateRange: null as [Date, Date] | null,
  name: '' as string,
  ruleCategory: '' as string,
  isMasterRule: null as number | null
})
const isLoading = ref(false);

// 模态框状态
const addDiscipleModalVisible = ref(false);
const editDiscipleModalVisible = ref(false);
const deleteDiscipleModalVisible = ref(false);
const addScoreModalVisible = ref(false);
const addRulesModalVisible = ref(false);

// 表单数据
const newDisciple = ref<Disciple>(new Disciple("", ""));

const formModel = reactive({});

// 生命周期
onMounted(() => {
  loadDisciples();
});

// 辅助函数：从 sessionStorage 获取数据
const getItem = () => {
  const data = sessionStorage.getItem("routerParam");
  return data ? JSON.parse(data) : null;
};

// 从服务中加载数据
const loadDisciples = async (): Promise<void> => {
  isLoading.value = true;
  try {
    // 获取原始数据
    const discipleData = DiscipleService.getAllDisciple();
    const ruleData = RuleService.getAllRules();
    
    // 将普通对象转换为 Disciple 实例
    disciples.value = discipleData.map(d => {
      const disciple = new Disciple(d.name, d.code);
      // 复制所有属性
      Object.assign(disciple, d);
      return disciple;
    });
    
    rulesList.value = ruleData.map(r => {
      const rule = new ScoringRule(r.category, r.item, r.description);
      Object.assign(rule, r);
      return rule;
    });

    // 检查是否有通过路由参数指定的弟子
    const routerParam = getItem();
    if (routerParam && routerParam.id) {
      const targetDisciple = disciples.value.find(d => d.id === routerParam.id);
      if (targetDisciple) {
        viewDisciples(targetDisciple as Disciple);
        sessionStorage.setItem("routerParam", JSON.stringify({}));
        return;
      }
    } 
    
    if (disciples.value.length > 0 && !currentDisciple.value) {
      viewDisciples(disciples.value[0] as Disciple);
    } else if (currentDisciple.value) {
      // 刷新当前弟子信息，确保是实例
      const updatedDisciple = disciples.value.find(d => d.id === currentDisciple.value?.id) as Disciple;
      viewDisciples(updatedDisciple ? updatedDisciple : disciples.value[0] as Disciple);
    }
    
  } catch (error) {
    console.error('加载弟子数据失败:', error);
    ElMessage.error('加载数据失败');
  } finally {
    isLoading.value = false;
  }
};

const viewDisciples = (disciple: Disciple): void => {
  currentDisciple.value = disciple;
  // console.log(tableFilter.value);
  viewDetails.value = filterDetails([...disciple.details], tableFilter.value.dateRange, tableFilter.value.name, tableFilter.value.ruleCategory, tableFilter.value.isMasterRule);
};

const resetFilter = (): void => {
  tableFilter.value = {
    dateRange: null,
    name: '',
    ruleCategory: '',
    isMasterRule: null
  };
  if (currentDisciple.value) {
    viewDetails.value = filterDetails([...currentDisciple.value.details], tableFilter.value.dateRange, tableFilter.value.name, tableFilter.value.ruleCategory, tableFilter.value.isMasterRule);
  }
};

const discipleMenu = (disciple: Disciple): void => {
  currentDisciple.value = disciple;
  editDiscipleBtn();
};

const addDiscipleBtn = (): void => {
  newDisciple.value = new Disciple("", "");
  addDiscipleModalVisible.value = true;
};

// 筛选明细操作
const filterDetails = (details: Detail[], range: [Date, Date] | null, name: string | null = null, ruleCategory: string | null = null, isMasterRule: number | null = null): Detail[] => {
  let filtered = details

  // 日期筛选
  if (range && range.length === 2 && range[0] < range[1]) {
      const startDate = range[0];
    const endDate = range[1];
    filtered = filtered.filter(detail => {
      const detailDate = new Date(detail.date);
      return detailDate >= startDate && detailDate <= endDate;
    });
  }

  // 模糊搜索
  if (name && name.trim() !== '') {
    const lowerName = name.trim().toLowerCase();
    filtered = filtered.filter(detail => detail.reason.toLowerCase().includes(lowerName));
  }

  // 规则类别筛选
  if (ruleCategory && ruleCategory.trim() !== '') {
    filtered = filtered.filter(detail => detail.rule.category === ruleCategory);
  }

  // 山长/师门规则筛选
  if (isMasterRule && isMasterRule !== -1) {
    filtered = filtered.filter(detail => detail.rule.rules.isMasterScore === isMasterRule || detail.rule.rules.isMasterScore === 2);
  }

  return filtered;
};

const addDiscipleCtl = async (): Promise<void> => {
  if (!newDisciple.value.name?.trim() || !newDisciple.value.code?.trim()) {
    ElMessage.error('姓名和代号不能为空！');
    return;
  }

  try {
    // 确保传递的是 Disciple 实例
    const discipleInstance = new Disciple(newDisciple.value.name, newDisciple.value.code);
    Object.assign(discipleInstance, newDisciple.value);
    
    DiscipleService.addDisciple(discipleInstance);
    ElMessage.success('弟子添加成功！');
    addDiscipleModalVisible.value = false;
    
    await loadDisciples();
    
    const newDiscipleFromService = disciples.value.find(d => d.code === newDisciple.value.code);
    if (newDiscipleFromService) {
      currentDisciple.value = newDiscipleFromService;
    }
    
  } catch (error) {
    console.error('添加弟子失败:', error);
    ElMessage.error('添加弟子失败');
  }
};

const editDiscipleBtn = (): void => {
  if (!currentDisciple.value) return;

  newDisciple.value = { ...currentDisciple.value };
  editDiscipleModalVisible.value = true;
};

const editDiscipleCtl = async (): Promise<void> => {
  if (!newDisciple.value.name?.trim() || !newDisciple.value.code?.trim()) {
    ElMessage.error('姓名和代号不能为空！');
    return;
  }

  try {
    // 确保传递的是 Disciple 实例
    const discipleInstance = new Disciple(newDisciple.value.name, newDisciple.value.code);
    Object.assign(discipleInstance, newDisciple.value);

    DiscipleService.editDisciple(discipleInstance as Disciple);
    ElMessage.success('弟子信息更新成功！');
    editDiscipleModalVisible.value = false;
    await loadDisciples();
  } catch (error) {
    console.error('编辑弟子失败:', error);
    ElMessage.error('编辑弟子失败');
  }
};

const deleteDiscipleBtn = (): void => {
  if (!currentDisciple.value) return;

  newDisciple.value = { ...currentDisciple.value };
  deleteDiscipleModalVisible.value = true;
};

const deleteDiscipleCtl = async (): Promise<void> => {
  if (!newDisciple.value.id) return;

  try {
    DiscipleService.deleteDisciple(newDisciple.value.id);
    ElMessage.success('弟子删除成功！');
    deleteDiscipleModalVisible.value = false;
    await loadDisciples();

    if (disciples.value.length > 0) {
      currentDisciple.value = disciples.value[0];
    } else {
      currentDisciple.value = null;
    }
  } catch (error) {
    console.error('删除弟子失败:', error);
    ElMessage.error('删除弟子失败');
  }
};

const viewScoreRulesSelect = (): void => {
  currentRules.value = [];
  addRulesModalVisible.value = true;
};

const addRulesCtl = (): void => {
  // 实现得分规则添加逻辑
  try {
    currentDetails.value = currentRules.value.map((ruleId) => {
      const rule = rulesList.value.find(r => r.id === ruleId);
      return rule ? new Detail(DateUtil.formatCurrentDate(), rule.rules.leader.defaultScore || 0, rule.rules.master.defaultScore || 0, rule.item || "", rule as ScoringRule) : null;
    }).filter(detail => detail !== null);
    addRulesModalVisible.value = false;
    addScoreModalVisible.value = true;
  } catch (error) {
    console.error('加载得分规则时，发生错误:', error);
  }
};

const returnScoringRulesDialog = (): void => {
  currentDetails.value = new Array<Detail>();
  addScoreModalVisible.value = false;
  addRulesModalVisible.value = true;
};

const addDetailsCtl = async (): Promise<void> => {
  console.log('添加得分明细:', currentDetails.value);
  if (!currentDisciple.value) {
    ElMessage.error('当前弟子信息有误，无法添加得分记录！');
    return;
  }
  
  let result = DiscipleService.addScoreToDisciple(currentDetails.value, currentDisciple.value.id);
  if (result.success) {
    ElMessage.success('得分记录添加成功！');
    
    // 重新加载数据
    await loadDisciples();
    
    // 确保当前弟子是实例对象
    if (currentDisciple.value?.id) {
      const updated = disciples.value.find(d => d.id === currentDisciple.value?.id);
      if (updated) {
        currentDisciple.value = convertToDiscipleInstance(updated);
      }
    }
  } else {
    ElMessage.error(result.message || '添加得分记录失败！');
  }
  addScoreModalVisible.value = false;
};

const deleteDetailBtn = async (detailId: string): Promise<void> => {
  if (!currentDisciple.value?.id) return;
  try {
    DiscipleService.deleteDetail(currentDisciple.value.id, detailId);
    ElMessage.success('得分记录删除成功！');
    
    // 重新加载数据
    await loadDisciples();
    
    // 确保当前弟子是实例对象
    if (currentDisciple.value?.id) {
      const updated = disciples.value.find(d => d.id === currentDisciple.value?.id);
      if (updated) {
        // 重要：确保是 Disciple 实例
        currentDisciple.value = convertToDiscipleInstance(updated);
      }
    }
  } catch (error) {
    console.error('删除得分记录失败:', error);
    ElMessage.error('删除得分记录失败');
  }
};

// 辅助函数：将普通对象转换为 Disciple 实例
const convertToDiscipleInstance = (data: any): Disciple => {
  const disciple = new Disciple(data.name, data.code);
  Object.assign(disciple, data);
  
  // 转换 details
  if (data.details && Array.isArray(data.details)) {
    disciple.details = data.details.map((detail: any) => {
      const detailInstance = new Detail(detail.date, detail.leaderScore, detail.masterScore, detail.reason, detail.rule);
      Object.assign(detailInstance, detail);
      return detailInstance;
    });
  }
  
  return disciple;
};
</script>

<style scoped>
.disciple-container {
  height: 89vh;
  background-color: #f5f7fa;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  background-color: #fff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  z-index: 10;
  position: relative;
  overflow: hidden;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

.sidebar-header.fixed-header {
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

.sidebar-header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.total-count {
  font-size: 12px;
  color: #909399;
  background-color: #f0f2f5;
  padding: 4px 8px;
  border-radius: 12px;
}

.disciple-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.disciple-list.scrollable {
  overflow-y: auto;
  flex: 1;
}

.disciple-card {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.disciple-card:hover {
  background-color: #f0f7ff;
  border-color: #c6e2ff;
}

.disciple-card.active {
  background-color: #ecf5ff;
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.disciple-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #409eff, #79bbff);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 12px;
  flex-shrink: 0;
}

.disciple-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.disciple-name-code {
  display: flex;
  flex-direction: column;
}

.disciple-name {
  font-weight: bold;
  color: #303133;
  margin-bottom: 2px;
}

.disciple-code {
  font-size: 12px;
  color: #909399;
}

.disciple-score {
  text-align: right;
}

.score-value {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #409eff;
}

.score-label {
  font-size: 12px;
  color: #909399;
}

.fixed-add-card {
  padding: 10px;
  border-top: 1px solid #eee;
  background-color: #fff;
  flex-shrink: 0;
}

.disciple-add {
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #909399;
  border: 1px dashed #dcdfe6;
  background-color: #fafafa;
  margin-bottom: 0;
}

.disciple-add:hover {
  background-color: #f0f2f5;
  border-color: #c0c4cc;
}

.add-icon {
  font-size: 20px;
  margin-bottom: 5px;
}

/* 主内容区样式 */
.main-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-header {
  padding: 20px 30px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.content-header.fixed-header {
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

.disciple-profile {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #409eff, #79bbff);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin-right: 15px;
}

.profile-info {
  flex: 1;
}

.current-name {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #303133;
}

.current-code {
  font-size: 16px;
  color: #606266;
  font-weight: normal;
}

.score-display, .star-display {
  display: flex;
  align-items: center;
}

.score-badge, .star-badge {
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: bold;
  margin-right: 10px;
}

.score-text, .star-text {
  color: #606266;
  font-size: 14px;
}

.score-badge {
  background: linear-gradient(135deg, #67c23a, #85ce61);
}

.star-badge {
  background: linear-gradient(135deg, #e6d931, #e6d931);
}

.action-bar {
  display: flex;
  /* justify-content: space-between; */
  /* align-items: center; */
}

.date-filter, .name-filter, .category-filter, .master-rule-filter {
  margin-right: 15px;
}

.date-picker {
  width: 280px;
}

.add-record-btn {
  padding: 10px 20px;
  border-radius: 6px;
}

/* 内容主体样式 */
.content-body {
  flex: 1;
  padding: 20px 30px;
  display: flex;
  gap: 20px;
  overflow: hidden;
}

.content-body.scrollable {
  overflow-y: auto;
}

.table-container {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.score-table {
  border-radius: 8px;
}

.stats-card {
  width: 240px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  flex-shrink: 0;
}

.stats-header {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fafafa;
}

.stats-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.stats-content {
  padding: 15px 20px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.stat-item:last-child {
  margin-bottom: 0;
}

.stat-label {
  color: #606266;
  font-size: 14px;
}

.stat-value {
  color: #303133;
  font-weight: bold;
}

/* 表格行样式 */
:deep(.positive-row) {
  --el-table-tr-bg-color: #f0f9ff;
}

:deep(.negative-row) {
  --el-table-tr-bg-color: #fef0f0;
}

.positive-score {
  color: #67c23a;
  font-weight: bold;
}

.negative-score {
  color: #f56c6c;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .content-body {
    flex-direction: column;
  }

  .stats-card {
    width: 100%;
  }
}

.disciple-menu {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  /* 在右侧 */
  justify-content: flex-end;
}

.add-score-detail-modal {
  width: 1200px;
}

.scoring-item-detail {
  margin-bottom: 3px;
  color: #383838;
  font-size: 15px;
}
</style>